<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
</head>
<body style="background-color: #f2f2f2;">

<div class="layui-carousel" id="test1">
	 <div carousel-item>
		  <div>条目1</div>
		  <div>条目2</div>
		  <div>条目3</div>
		  <div>条目4</div>
		  <div>条目5</div>
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>

<script type="text/javascript" th:inline="javascript">
    layui.use(['form', 'carousel'], function () {
        var imgs = wlbKit.getUrlParam('imgs');
        var html = '<div carousel-item>';
        if (imgs.length > 0) {
            var imgArray = imgs.split(",");
            for(var i=0,len=imgArray.length;i<len; i++){
                html += '<div><img style="width: 100%;height: 100%;display:block" src="'+imgArray[i]+'"/></div>';

            }
		  }else{
            html += '<div>无可预览图片</div>';
		  }
       
        html += '</div>';
        $("#test1").html(html);
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

</body>
</html>